<template>
    <div class="app-container">
        <el-steps :space="260" :active="0">
            <el-step title="待付款" description="买家已创建订单，等待付款"></el-step>
            <el-step title="已付款" description="买家已付款，等待卖家处理"></el-step>
            <el-step title="交易成功" description="买家确认订单，交易成功"></el-step>
            <el-step title="已评价" description="买家已评价"></el-step>
        </el-steps>
        <el-card class="order_info_card">
            <h2>收货人：</h2>
            <p>{{buyerDetail.linkMan}} {{buyerDetail.mobile}}</p>
            <h2>收货地址：</h2>
            <p>{{buyerDetail.address}}</p>
            <hr>
            <h2>订单信息：</h2>
            <div class="info">
                <p>订单号: {{buyerDetail.order_id}}</p>
                <p>创建时间: {{buyerDetail.orderTime}}</p>
            </div>
            <div class="info">
                <p>付款时间: 2017-10-11 11:05:54</p>
                <p>成交时间: 2017-10-18 08:45:32</p>
            </div>
        </el-card>
        <el-table :data="tableData" style="margin-top:15px;text-align:center;width:851px;" border>
            <el-table-column header-align="center" width="300" label="商品">
                <template scope="scope">
                    <!-- <span>{{ scope.row.title }}</span> -->
                    <div class="good_table">
                        <div class="coverImg">
                            <img :src="scope.row.icon">
                        </div>
                        <div class="good_info">
                            <div class="title">{{ scope.row.name }}</div>
                            <div class="classify">
                                <span v-for="item in scope.row.classify">{{item.type}} : {{item.content}}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column header-align="center" width="100" label="单价">
                <template scope="scope">
                    <span>{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" width="100" label="数量">
                <template scope="scope">
                    <span>{{ scope.row.count }}</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" width="150" label="优惠">
                <template scope="scope">
                    <span>{{ scope.row.coupon }}</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" width="100" label="操作">
                <template scope="scope">
                   <el-button size="small" type="info" v-if="scope.row.status == 5" @click="handleOrder()">回复</el-button>
                    <span >暂无评论</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" width="100" label="操作">
                <template scope="scope">
                   <el-button size="small" type="info" @click="showDetail(scope.row.goods_id)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="order_total">
            订单总金额: <span class="price">{{buyerDetail.sumPrice}} 元 </span> <span style="color: red;margin-left: 10px">优惠 ￥{{buyerDetail.discount}}</span>
        </div>
    </div>
</template>

<script>
    import formatDate from '@/utils/date'
    import { getOrderById, getOrderList } from '@/api/order'
    export default {
        data() {
            return {
                tableData: [],
                buyerDetail: {}
            };
        },
        created() {
            let id = this.$route.query.id
            this.order_id = id
            this.getOrderDetail()

        },

        methods: {
            getOrderDetail() {
                getOrderById(this.order_id).then((res) => {
                   
                    if (res.order) {
             
                        res.order.orderTime = formatDate(new Date(res.order.orderTime * 1), "yyyy-MM-dd")
                        this.buyerDetail = res.order
                    }
                })
                getOrderList(this.order_id).then((res) => {
                  
                    if (res.orders) {
                        this.tableData = res.orders
                    }
                })
            },
        }
    };

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    .good_table {
        display: flex;
        .coverImg {
            img {
                margin: 10px 10px 10px 0;
                display: block;
                width: 100px;
                height: 100px;
            }
        }
        .good_info {
            margin: 10px 0;
            .title {
                text-align: left;
                font-size: 14px;
            }
            .classify {
                font-size: 12px;
                text-align: left;
                color: #666;
            }
        }
    }
    
    .order_info_card {
        width: 850px;
        padding: 10px;
        margin: 10px 0;
        h2 {
            font-size: 16px;
        }
        p {
            font-size: 14px;
        }
        .info {
            display: flex;
            p {
                flex: 0 0 50%;
            }
        }
    }
    
    .order_total {
        margin: 10px 0;
        padding: 10px;
        color: #333;
        font-size: 16px;
        .price {
            color: #f50;
            font-size: 20px;
            font-weight: 700;
        }
    }
</style>